<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">
    #h1id{
      background: red;
    }

    #h3id{
      background: blue;
    }

    .a{
      background: #eee;
    }
    .b{
      border:2px solid red;
    }
  </style>
</head>

<body>

  <div class="s">
    <h1 v-bind:id="red" >h1h1h1</h1>
    <h3 :id="blue">h3h3h3h3</h3>

    <h2 :class="h5class">h5h5h5hh5</h2>
    <p :style="[stylee,sty]">h5h5h5hh5</p>
  </div>

  <script type="text/javascript">
  // const h1dom = document.querySelector("#h1id");
  // const h3dom = document.querySelector("#h3id");
  // h1dom.id="h3id";
  // console.log(h1dom);
  // console.log(document.querySelector("#h1id"));
  // console.log(h1dom === document.querySelector("#h1id"));


    var vm = new Vue({
      el:'.s',
      data:{
        red:"h1id",
        blue:"h3id",
        // h5class:"a b"
        // h5class:['a', 'b']
        h5class:{
            a:true,
            b:true
        },
        stylee:{
          background:'#067'
        },
        sty:{
          border:" 2px solid blue"
        }

      }
    });

    const h1dom = document.querySelector("#red");
    const h3dom = document.querySelector("#blue");
    vm.red = "blue";
    console.log(h1dom);
    console.log(vm.red);
    console.log(document.querySelector("#red"));
    console.log(h1dom === document.querySelector("#red"));
  </script>
</body>

</html>
